<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">图片名称：</span>
                <el-input
                    placeholder="请输入图片名称搜索"
                    v-model.trim="search_text"
                    clearable
                ></el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button
                    type="primary"
                    :loading="search_btn"
                    :icon="Search"
                    @click="handleSearch"
                    >搜索</el-button
                >
            </div>
        </div>
        <div class="table-mb">
            <el-button type="primary" plain :icon="Delete" @click="allDel"
                >批量删除</el-button
            >
            <el-button type="primary" :icon="CirclePlus" @click="addClass"
                >添加</el-button
            >
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{
                background: '#F5F7FA',
                textAlign: 'center',
            }"
            :cell-style="
                ({ column }) => {
                    return {
                        textAlign:
                            column.className === 'operation-nav'
                                ? 'left'
                                : 'center',
                        paddingLeft:
                            column.className === 'operation-nav' ? '25px' : '0',
                    };
                }
            "
            border
            element-loading-background="rgba(255, 255, 255, 0.6)"
            @selection-change="handleAllSelected"
        >
            <el-table-column type="selection" width="55" />
            <el-table-column label="图片" width="120" fixed="left">
                <template #default="{ row }">
                    <el-image
                        class="good-logo"
                        lazy
                        :src="imgUrl + row.photo + '!img_400'"
                        fit="cover"
                        v-if="row.photo"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="tag" label="图片名称"></el-table-column>
            <el-table-column
                prop="album_name"
                label="所属分类"
            ></el-table-column>
            <el-table-column
                prop="created_at_label"
                label="上传时间"
            ></el-table-column>
            <el-table-column
                label="操作"
                width="200"
                class-name="operation-nav"
                fixed="right"
            >
                <template #default="scope">
                    <el-button type="primary" link @click="clickEdit(scope.row)"
                        >编辑
                    </el-button>
                    <el-popconfirm
                        title="是否确定删除？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="clickDel(scope.row)"
                    >
                        <template #reference>
                            <el-button link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="slot, sizes, prev, pager, next, jumper"
        >
            <span class="color-#606266"
                >共&nbsp;{{
                    totalNums >= 100 * pageSize
                        ? `${100 * pageSize}+`
                        : totalNums
                }}&nbsp;条</span
            >
        </el-pagination>

        <!-- 编辑 -->
        <el-dialog
            v-model="dialogEdit"
            title="编辑图片"
            width="540px"
            :append-to-body="true"
            :destroy-on-close="true"
        >
            <div class="edit-box">
                <div class="edit-item">
                    <p>图片名称：</p>
                    <el-input
                        placeholder="请输入图片名称"
                        v-model.trim="img_name"
                        clearable
                    ></el-input>
                </div>
                <el-button type="primary" @click="confirmEdit">确认</el-button>
            </div>
        </el-dialog>

        <!-- 图片库 -->
        <picture-library
            :show="showImg"
            :foot-bth="false"
            @close="closeLibrary"
            @select="selectImg"
        ></picture-library>
    </div>
</template>

<script setup>
import { inject, ref, onMounted, watch } from "vue";
import OneLoad from "@mixins/one-load";
import MoreBtn from "@/components/MoreBtn.vue";
import { Search, CirclePlus, Delete } from "@element-plus/icons-vue";
import PictureLibrary from "@components/PictureLibrary.vue";

const $message = inject("$message");

onMounted(() => {
    getList();
});

/**
 * minxin列表加载
 */
const {
    page,
    pageSizeNum,
    pageSize,
    loading,
    arr_data,
    totalNums,
    search_btn,
    search_text,
    pubParams,
    pubRefreshParams,
    getdata,
} = OneLoad();
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1;
    pageSize.value = val;
    pubParams(getList);
});
// 跳转第几页
watch(page, (val) => {
    page.value = val;
    pubParams(getList);
});
const handleSearch = () => {
    search_btn.value = true;
    pubRefreshParams(getList);
};

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: search_text.value,
        album_id: 0,
    };
    getdata("design/index", params);
}

/**
 * 添加图片
 * @param {Boolean} showImg 显示图片库
 * @param {Function} addClass 显示图库
 * @param {Function} selectImg 图库中已选择的图片
 * @param {Function} closeLibrary 关闭图库
 */
const showImg = ref(false);
const addClass = () => {
    showImg.value = true;
};
const selectImg = (val) => {
    showImg.value = false;
    pubParams(getList);
};
const closeLibrary = () => {
    showImg.value = false;
    pubParams(getList);
};

/**
 * 编辑图片
 * @param {Boolean} dialogEdit 编辑弹窗状态
 * @param {String} img_name 图片名称
 * @param {String} photo_id 图片ID
 * @param {Function} confirmEdit 确认编辑
 */
const img_name = ref("");
const photo_id = ref("");
const dialogEdit = ref(false);
const clickEdit = (row) => {
    img_name.value = row.tag;
    photo_id.value = row.photo_id;
    dialogEdit.value = true;
};
const confirmEdit = () => {
    if (img_name.value == "") {
        $message({ message: "请输入图片名称", type: "warning" });
        return;
    }
    $axios
        .post("design/editImg", {
            photo_id: photo_id.value,
            title: img_name.value,
        })
        .then((res) => {
            dialogEdit.value = false;
            if (res.data.code == 0) {
                pubParams(getList);
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        })
        .catch((err) => {});
};

// 删除单个
const clickDel = (row) => {
    postDel(row.photo_id);
};
// 删除多个
const ids = ref([]);
const handleAllSelected = (val) => {
    ids.value = val;
};
const allDel = () => {
    if (ids.value.length == 0) {
        $message({ message: "请选择需要删除的数据", type: "warning" });
        return;
    }
    let arrs = [];
    for (let i = 0; i < ids.value.length; i++) {
        arrs.push(ids.value[i].photo_id);
    }
    postDel(arrs);
};
// 删除接口
function postDel(params) {
    $axios
        .post("design/delImg", {
            photo_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList);
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        })
        .catch((err) => {});
}
</script>

<style lang="less" scoped>
.good-logo {
    width: 80px;
    height: 80px;
    border-radius: @radius-xs;
}

.edit-box {
    padding: @padding-sm @padding-mdl;

    .edit-item {
        display: flex;
        align-items: center;
        font-size: @font-size-md;
        color: @gray-8;
        margin-bottom: @margin-xl;

        p {
            flex: none;
            text-align: right;
            padding-right: @padding-xs;
        }
    }

    .el-button {
        margin-left: 78px;
    }
}
</style>
